<!--  -->
<template>
    <div class="footer-warp">
        <div class="foot-container">
            <div class="other-box">
                <div class="log-bg"></div>
                <div class="other-list-box">
                    <div class="more">
                        <div>了解更多</div>
                        <a href="#">新闻中心</a>
                        <a href="#">媒体资源</a>
                        <a href="#">供应商</a>
                    </div>
                    <div class="more">
                        <div>加入我们</div>
                        <a href="#">社会招聘</a>
                        <a href="#">校园招聘</a>
                        <a href="#">工作兼职</a>
                    </div>
                    <div class="more">
                        <div>联系我们</div>
                        <a href="#">服务热线</a>
                        <a href="#">廉正举报</a>
                        <a href="#">知识产权</a>
                    </div>
                    <div class="concern-download">
                        <div class="tit">下载和关注</div>
                        <div class="mt-box">
                            <div>
                                <div class="mt-item"><img src="../../assets/images/mt.png" alt="美团App">美团App</div>
                                <div class="mt-item"><img src="../../assets//images//mt1.png" alt="美团外卖App">美团外卖App
                                </div>
                                <div class="mt-item"><img src="../../assets//images//dz.png" alt="大众点评App">大众点评App</div>
                            </div>
                            <div>
                                <div class="mt-item"><img src="../../assets/images//wb.png" alt="美团微博">美团微博</div>
                                <div class="mt-item"><img src="../../assets/images/wx.png" alt="美团微信公众号">美团微信公众号</div>
                                <div class="mt-item"><img src="../../assets/images/sph.png" alt="美团微信视频号">美团微信视频号</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 移动设备内容 -->
            <div class="m-footer-warp p-20">
                <div class="d-flex jc-between p-10-0 d-tetx-center">
                    <div class="f-size-16">下载和关注</div>
                    <div class="d-flex ">
                        <img :src="v.imgUrl" alt="" v-for="v in imgList" :key="v.id"
                            style="width: 20px;cursor: pointer;" class="p-5">
                    </div>
                </div>
                <div>
                    <div class="d-flex f-size-16 jc-between p-10-0 d-tetx-center"><span>了解更多</span>
                        <i class="bi bi-chevron-down c-pointer" @click="showInfoFun('1')" v-if="flge1 == false"></i>
                        <i class="bi bi-chevron-up c-pointer" @click="showInfoFun('1')" v-else></i>
                    </div>
                    <div class="m-show-info" v-show="flge1 == true">
                        <div>新闻中心</div>
                        <div>媒体资源</div>
                        <div>供应商</div>
                    </div>
                </div>
                <div>
                    <div class="d-flex f-size-16 jc-between p-10-0  d-tetx-center"><span>加入我们</span>
                        <i class="bi bi-chevron-down c-pointer" @click="showInfoFun('2')" v-if="flge2 == false"></i>
                        <i class="bi bi-chevron-up c-pointer" @click="showInfoFun('2')" v-else></i>
                    </div>
                    <div class="m-show-info" v-show="flge2 == true">
                        <div>社会招聘</div>
                        <div>校园招聘</div>
                        <div>工作兼职</div>
                    </div>
                </div>
                <div>
                    <div class="d-flex f-size-16 jc-between p-10-0 d-tetx-center">
                        <span>联系我们</span>
                        <i class="bi bi-chevron-down c-pointer" @click="showInfoFun('3')" v-if="flge3 == false"></i>
                        <i class="bi bi-chevron-up c-pointer" @click="showInfoFun('3')" v-else></i>
                    </div>
                    <div class="m-show-info" v-show="flge3 == true">
                        <div>服务热线</div>
                        <div>廉正举报</div>
                        <div>知识产权</div>
                    </div>

                </div>
                <div class="foot-log-box">
                    <img src="../../assets/images/foot-log.png" alt="" style="height: 30px;">
                </div>
            </div>

        </div>
        <div class="filings-box">
            <div>举报电话：4006018900，举报邮箱：tousujubao@meituan.com</div>
            <div>以上渠道均可投诉举报：互联网违法和不良信息，涉及未成年人保护、互联网算法推荐、谣言类信息、生活服务类专项举报等相关问题。</div>
            <div>©2024 美团版权所有 <a href="#">京ICP备10211739号</a> <img src="../../assets/images/jh.png" alt=""> <a
                    href="#">京公网安备 11000002002052号</a> <a href="#">隐私政策</a>
                <a href="#">规则中心</a>
            </div>
        </div>
    </div>

</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue';
import imgUrl1 from '../../assets/images/mt.png';
import imgUrl2 from '../../assets/images/mt1.png';
import imgUrl3 from '../../assets/images/dz.png';
import imgUrl4 from '../../assets/images/wb.png';
import imgUrl5 from '../../assets/images/wx.png';
import imgUrl6 from '../../assets/images/sph.png';
export default defineComponent({
    name: 'Footer',
    setup() {
        const imgList = ref([
            {
                id: 1,
                imgUrl: imgUrl1,
            },
            {
                id: 2,
                imgUrl: imgUrl2,
            },
            {
                id: 3,
                imgUrl: imgUrl3,
            },
            {
                id: 4,
                imgUrl: imgUrl4,
            },
            {
                id: 5,
                imgUrl: imgUrl5,
            },
            {
                id: 6,
                imgUrl: imgUrl6,
            },
        ]);
        let flge1 = ref(false);
        let flge2 = ref(false);
        let flge3 = ref(false);
        const showInfoFun = (t: string) => {
            switch (t) {
                case '1':
                    flge1.value = !flge1.value;
                    break;
                case '2':
                    flge2.value = !flge2.value;
                    break;
                case '3':
                    flge3.value = !flge3.value;
                    break;
            }
        };
        return {
            imgList, showInfoFun,
            flge1, flge2, flge3
        }

    }
});
</script>
<style scoped lang="scss">
.footer-warp {

    background-color: #f3f3f4;
    min-height: 400px;
    font-size: 14px;

    .foot-container {
        max-width: 1280px;
        margin: 0 auto;

        .other-box {
            display: flex;
            justify-content: space-between;
            padding: 40px 0;
            border-bottom: 1px solid #e7e7e7;

            .log-bg {
                width: 130px;
                height: 50px;
                background-image: url('../../assets/images/foot-log.png');
                background-repeat: no-repeat;
            }

            .other-list-box {
                // flex: 1;
                // margin-left: 380px;
                display: flex;
                justify-content: space-between;

                .more {
                    width: 150px;

                    div {

                        padding: 15px 0;
                    }

                    a {
                        display: block;
                        padding: 15px 0;
                        color: #11192559;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                .concern-download {
                    .tit {
                        padding: 15px 0;
                    }

                    .mt-box {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        align-items: center;
                        color: #11192559;
                        width: 300px;

                        .mt-item {
                            display: flex;
                            align-items: center;
                            padding: 12px 0;

                            img {
                                margin-right: 8px;
                            }
                        }
                    }
                }
            }
        }




    }

    .filings-box {
        text-align: center;
        line-height: 30px;
        color: #11192559;
        padding: 20px 0;

        a {
            color: #11192559;
            text-decoration: underline;
        }
    }

    .filings-box div:nth-child(1) {
        font-size: 14px;
    }

    .filings-box div:nth-child(3) {
        font-weight: 500;
    }
}

.m-footer-warp {
    max-width: 1024px;

    .foot-log-box {
        text-align: center;
        padding: 30px 0;
        border-top: 1px solid #e7e7e7;
    }

    .m-show-info {
        line-height: 30px;
    }
}
</style>